<template>
  <headPage :tabsIndex="1"></headPage>
  <div class="main_box content">
    <div class="navigate_view">
      <span class="navigate_text" @click="goBack">{{
        freecoursezone_zhuanqumingcheng
      }}</span>
      <span class="navigate_line">/</span>
      <span class="navigate_text" @click="goBack">{{
        freeprofessionalmanagement_zhuanyemingcheng
      }}</span>
      <span class="navigate_line">/</span>
      <span class="navigate_text" @click="goBack">详情</span>
      <span class="navigate_line">/</span>
      <span class="navigate_last_text">课程资料</span>
    </div>

    <div class="material" v-loading="loading">
      <div class="material_content">
        <div class="table_th">
          <div class="th_item th_w_1">文件</div>
          <div class="th_item th_w_2">操作</div>
        </div>
        <div
          class="table_td"
          v-for="(item, index) in materialList"
          :key="index"
        >
          <div class="td_item th_w_1">{{ item.fujian[0].name }}</div>
          <div class="td_item td_item_active th_w_2">
            <span
              v-if="item.yunxuyulan == 1 && item.yunxuxiazai == 0"
              @click="preview(item.fujian)"
              >点击预览</span
            >
            <span
              v-if="item.yunxuxiazai == 1 && item.yunxuyulan == 0"
              @click="download(item.fujian[0].path)"
              >点击下载</span
            >
            <span
              v-if="item.yunxuxiazai == 1 && item.yunxuxiazai == 1"
              @click="download(item.fujian[0].path)"
              >点击下载</span
            >
            <span v-if="item.yunxuyulan == 0 && item.yunxuxiazai == 0">-</span>
          </div>
        </div>
      </div>
    </div>
    <div class="no_data" v-if="materialList.length == 0 && !loading">
      <img class="no_img" src="../../assets/default/12.png" alt="" />
    </div>
  </div>
  <footerPage></footerPage>

  <maskLayer v-model="visible" center append-to-body>
    <div class="agreement_content">
      <div class="agreement_title">
        <span></span>
        <img @click="visible=false" src="../../assets/login/9.png" alt="" />
      </div>
      <div class="agreement_view">
        <el-scrollbar>
          <iframe
            class="iframe_view"
            frameborder="0"
            :src="'https://view.officeapps.live.com/op/view.aspx?src=' + fileUrl"
          ></iframe>
        </el-scrollbar>
      </div>
    </div>
  </maskLayer>
</template>
  
<script name="courseMaterial" setup>
import { post6628b88a9268b } from "@/utils/api.js";
import headPage from "@/components/headPage.vue";
import footerPage from "@/components/footerPage.vue";
import maskLayer from "@/components/maskLayer.vue";
import { ref, onMounted, inject } from "vue";
const injectMessage = inject("$message");
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();

let aid = ref(route.query.aid); // 章节id
let freecoursezone_zhuanqumingcheng = ref(
  route.query.freecoursezone_zhuanqumingcheng
);
let freeprofessionalmanagement_zhuanyemingcheng = ref(
  route.query.freeprofessionalmanagement_zhuanyemingcheng
);

onMounted(() => {
  getData();
});
let loading = ref(true);
let materialList = ref([]);
function getData() {
  post6628b88a9268b({
    freecoursechapters_id: aid.value,
  })
    .then((res) => {
      // console.log(res);
      loading.value = false;
      if (res.code == 1) {
        materialList.value = res.data;
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
// 预览
let visible = ref(false);
let fileUrl = ref("");
function preview(item) {
  let row = item[0];
  if (!row.path) {
    injectMessage.error("文件获取失败，请重试");
    return;
  }
  const typeArr = ["doc", "docx", "ppt", "pptx", "xls", "xlsx"];
  let url = "";
  url = "http://view.officeapps.live.com/op/view.aspx?src=" + row.path;
  // window.open()居中打开
  const width = 1000;
  const height = 800;
  const top = (window.screen.availHeight - height) / 1.5;
  const left = (window.screen.availWidth - width) / 1.5;
  window.open(
    url,
    "",
    "width=" + width + ",height=" + height + ",top=" + top + ",left=" + left
  );

  // fileUrl.value = path;
  // visible.value = true;
}
// 下载
function download(path) {
  if (!path) {
    injectMessage.error("文件获取失败，请重试");
    return;
  }
  let url = path; // 替换为您要下载的文件的URL
  let link = "";
  fetch(url)
    .then((response) => response.blob())
    .then((blob) => {
      url = window.URL.createObjectURL(blob);
      link = document.createElement("a");
      link.href = url;
      // link.download = "file.pdf"; // 替换为您要保存的文件名
      link.click();
      link.remove();
    })
    .catch((error) => {
      console.log(error);
      injectMessage.error("文件下载失败");
    });
}

function goBack() {
  router.go(-1);
}
</script>
  
  <style lang="scss" scoped>
.content {
  margin-top: 97px;
}
.navigate_view {
  display: flex;
  align-items: center;
  padding: 13.5px 0 12px 0;
  .navigate_text {
    font-size: 9px;
    color: #666;
    cursor: pointer;
  }
  .navigate_line {
    font-size: 9px;
    color: #bfbfbf;
    margin: 0 5px;
  }
  .navigate_last_text {
    font-size: 9px;
    color: #1f52ae;
    cursor: pointer;
  }
}
.material {
  background: #fff;
  padding: 16px 0;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  min-height: 247px;
  .material_content {
    width: 410px;
    .table_th {
      background: #f6f7f9;
      border-top: 1px solid #eeeeee;
      border-left: 1px solid #eeeeee;
      border-bottom: 1px solid #eeeeee;
      display: flex;
      .th_item {
        padding: 8.5px 12px;
        // padding: 0 12px;
        border-right: 1px solid #eeeeee;
        font-size: 7px;
        color: #666;
        text-align: center;
      }
    }
    .table_td {
      border-left: 1px solid #eeeeee;
      border-bottom: 1px solid #eeeeee;
      display: flex;
      .td_item {
        padding: 8.5px 12px;
        border-right: 1px solid #eeeeee;
        font-size: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .td_item_active {
        font-size: 7px;
        color: #1f52ae;
        cursor: pointer;
      }
    }
    .th_w_1 {
      width: 222px;
    }
    .th_w_2 {
      width: 222px;
    }
    .table_td:hover {
      background: #f6f7f9;
    }
  }
}
.agreement_content {
  width: 540px;
  height: 380px;
  background: #fff;
  .agreement_title {
    width: 100%;
    height: 28px;
    background: #1f52ae;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 0 16px;
    img {
      width: 10px;
      height: 10px;
      cursor: pointer;
    }
  }
  .agreement_view {
    height: 352px;
    width: 100%;
    padding: 16px;
    font-size: 8px;
    color: #666;
  }
  .iframe_view {
    height: 100%;
    width: 100%;
  }
}
</style>
  